<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <lg-modal
    ref="modalRef"
    :width="500"
    height="500"
    :header="$t('修改密码')"
    center
    append-to-body
    destroy-on-close
    @confirm="ok"
  >
    <t-form
      ref="formRef"
      style="padding-right: 32px"
      :data="model"
      :rules="rules"
      labt-width="6em"
      status-icon
      labt-position="top"
    >
      <t-form-item :label="$t('旧密码')" name="oldPassword">
        <t-input v-model="model.oldPassword" type="password" show-password />
      </t-form-item>
      <t-form-item :label="$t('新密码')" name="newPassword">
        <t-input v-model="model.newPassword" type="password" show-password />
      </t-form-item>
      <t-form-item :label="$t('确认密码')" name="confirmPassword">
        <t-input v-model="model.confirmPassword" type="password" show-password />
      </t-form-item>
    </t-form>
  </lg-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { LgModal } from '@/soar';
import { updatePassword } from '@/api/account';

const modalRef = ref();
const formRef = ref();
const model = ref({});
const rules = ref({
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
});

function ok() {
  formRef.value.validate().then((res) => {
    if (res === true) {
      updatePassword(model.value).then(() => modalRef.value.close());
    }
  });
}

function open() {
  modalRef.value.open();
  formRef.value?.resetFields();
}
defineExpose({ open });
</script>
